<template>
  <div class="db-form">
    <nav class="nav-tools">
      <button @click="changLang('zh')">{{ $t("login.langZh") }}</button>
      <button @click="changLang('en')">{{ $t("login.langEn") }}</button>
    </nav>
    <el-form
      :model="formData"
      ref="vForm"
      :rules="rules"
      label-position="left"
      label-width="40px"
      size="default"
      @submit.native.prevent
    >
      <el-form-item :label="$t('login.userName')" prop="userName" class="required">
        <template #label="value">
          <el-icon><User /></el-icon>
        </template>
        <el-input
          v-model="formData.userName"
          :placeholder="$t('login.useNNamePlc')"
          type="text"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('login.password')" prop="password" class="required">
        <template #label="value">
          <el-icon><Lock /></el-icon>
        </template>
        <el-input
          v-model="formData.password"
          :placeholder="$t('login.passwordPlc')"
          type="password"
          clearable
        ></el-input>
      </el-form-item>
      <div class="static-content-item">
        <el-button type="success" style="width: 100%" @click.prevent="submitForm">{{
          $t("login.loginBtn")
        }}</el-button>
      </div>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import axios from "axios";
import { reactive, getCurrentInstance } from "vue";
import { useI18n } from "vue-i18n";
import { AjaxEntity } from "../model/EduEntity";
import { ElMessage } from "element-plus";
import router from "../route";
import $ from "jquery";
const formData = reactive({
  userName: "admin",
  password: "123456",
});

const rules = reactive({
  userName: [
    {
      required: true,
      message: "字段值不可为空",
    },
    {
      pattern: /^[a-z,A-Z,0-9]+$/,
      trigger: ["blur", "change"],
      message: "字母和数字",
    },
  ],
  password: [
    {
      required: true,
      message: "字段值不可为空",
    },
    {
      pattern: /^[a-z,A-Z,0-9]+$/,
      trigger: ["blur", "change"],
      message: "字母和数字",
    },
  ],
});
let instance: any = getCurrentInstance();
const submitForm = () => {
  instance.proxy.$refs["vForm"].validate((valid: any) => {
    if (!valid) return;
    login();
  });
};

const login = () => {
  axios
    .post("/api/login/user", formData, {
      headers: {
        "Content-Type": "application/json",
      },
    })
    .then((data) => {
      let dataRst: AjaxEntity = data.data as AjaxEntity;
      if (dataRst.success) {
        ElMessage.success(dataRst.msg);
        sessionStorage.setItem("userUuid", dataRst.code);
        router.push({ path: "/index" });
      } else {
        ElMessage.error(dataRst.msg);
      }
    });
};

const resetForm = () => {
  instance.proxy.$refs["vForm"].resetFields();
};

const { locale } = useI18n();
const changLang = (change: string) => {
  localStorage.setItem("lang", change);
  locale.value = change;
  $("#title-id").text(instance.proxy.$t("login.title"));
};
</script>
<style scoped>
.db-form {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 220px;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid #000;
  border-radius: 10px;
}
.nav-tools {
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.el-icon {
  font-size: 20px;
  height: 1.5em;
}
</style>
<style>
label.el-form-item__label:before {
  color: #ffff !important;
}
</style>
